<template>
  <div class="service-type">
    <div class="progress-item">
      <div class="progress-name">纠纷</div>
      <div class="progress">
        <el-progress color="#0AA7FF" define-back-color="#113150" :percentage="39" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="progress-item">
      <div class="progress-name">醉酒人员</div>
      <div class="progress">
        <el-progress color="#1BBE6B" define-back-color="#113150" :percentage="27" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="progress-item">
      <div class="progress-name">服务救助</div>
      <div class="progress">
        <el-progress color="#22DFE9" define-back-color="#113150" :percentage="11" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="progress-item">
      <div class="progress-name">交通事故</div>
      <div class="progress">
        <el-progress color="#FED52F" define-back-color="#113150" :percentage="10" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="progress-item">
      <div class="progress-name">噪音</div>
      <div class="progress">
        <el-progress color="#0AA7FF" define-back-color="#113150" :percentage="4" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="progress-item">
      <div class="progress-name">打架</div>
      <div class="progress">
        <el-progress color="#1BBE6B" define-back-color="#113150" :percentage="4" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="progress-item">
      <div class="progress-name">其他</div>
      <div class="progress">
        <el-progress color="#22DFE9" define-back-color="#113150" :percentage="6" :stroke-width="10" text-color="#fff"></el-progress>
      </div>
    </div>
    <div class="desc-block">
      <div class="desc-name">创新亮点</div>
      <div class="desc-content">“沉浸式”警民互动活动累计开展12场，覆盖群众8000余人次</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ServiceType",

}
</script>
<style lang="scss">
.service-type{
  .el-progress{
    flex-grow: 1;
  }
}
</style>
<style scoped lang="scss">
.service-type{
  width: 100%;
  height: 100%;
  padding: 10px 20px;
  .progress-item{
    width: 100%;
    margin-bottom: 25px;
    .progress-name{
      font-family: 冷酷体;
      margin-bottom: 10px;
      &:nth-child(1){
        color: $fontColorSecondary;
      }
      &:nth-child(2){
        color: $fontColorGreen;
      }
      &:nth-child(3){
        color: $fontColorMain;
      }
      &:nth-child(4){
        color: $fontColorYellow;
      }
      &:nth-child(5){
        color: $fontColorSecondary;
      }
      &:nth-child(6){
        color: $fontColorGreen;
      }
      &:nth-child(7){
        color: $fontColorMain;
      }
    }
    .progress{
      display: flex;
      align-items: center;
      width: 100%;
      color: #fff;
      font-size: 14px;
    }
  }
  .desc-block{
    width: 100%;
    padding:10px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(34, 223, 233, 0.1);
    .desc-name{
      font-family: 冷酷体;
      color: $fontColorMain;
      margin-bottom: 10px;
    }
    .desc-content{
      color: #fff;
    }
  }
}
</style>
